<template>
  <div class="app-container">
    <span class="log-path">日志路径: {{logPath}} </span>
    <main>
      <codemirror  ref="cmEditor"  :value="logContent" :options="cmOptions" @ready="onCmReady"  @focus="onCmFocus" @input="onCmCodeChange"/>
    </main>
  </div>
</template>

<script>


// const {is,chromeVersion,electronVersion,debugInfo} = require('electron-util')
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/mode/javascript/javascript.js'
import 'codemirror/theme/xq-light'
const {app} = require('@electron/remote')
const appDataPath = app.getPath('appData')
import path from 'path';
import fs from 'fs-extra';
const config = require('../../../../main/config');
let logFileName = config.get('log').fileName
const pkgName = require('../../../../../package.json').name
const mainLog = path.join(appDataPath,`/${pkgName}/logs`,logFileName)
export default {
  data() {
    return {
      logPath: mainLog,
      logContent: '开始打印日志..... \/n',
      cmOptions: {
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'xq-light',
        lineNumbers: true,
        line: true,
        // more CodeMirror options...
      }
    }
  },
  components: {
    codemirror
  },
  computed: {
    codemirror() {
      return this.$refs.cmEditor.codemirror
    }
  },
  mounted() {
    this.readLog(mainLog).then(() => {
        this.watcher = fs.watch(mainLog, () => {
          this.readLog(mainLog);
        });
      })
  },
  methods: {
     onCmReady(cm) {
      console.log('the editor is readied!')
    },
    onCmFocus(cm) {
      console.log('the editor is focused!')
    },
    onCmCodeChange(newCode) {
      this.logContent = newCode
    },
    readLog(path) {
      return fs.ensureFile(path).then(async () => {
        this.logContent = await fs.readFile(path, 'utf8')
      });
    },
    clear() {
      fs.outputFile(mainLog, '');
    }
  }
};
</script>

<style scoped>
  .log-path {
    text-align: center;
  }
  .CodeMirror {
    border: 1px solid #eee;
    height: 800px;  
  }
</style>

